<template>
    <div>
        <div style="display: flex;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>国家管理</span>
                <el-button  style="float: right; padding: 3px 0;"  type="text" @click="dialogCountryFormVisible = true">添加</el-button>
            </div>
            <div v-for="country in countryList" :key="country.id" class="text item">
                {{country.name }}
                <el-button  style="float: right; padding: 3px 0;"  type="text" @click="deleteCountry(country.id)">删除</el-button>
                <el-button  style="float: right; padding: 3px 0;"  type="text" @click="getCountry(country.id)">修改</el-button>
                
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>学历管理</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="dialogEducationFormVisible = true">添加</el-button>
            </div>
            <div v-for="education in educationList" :key="education.id" class="text item">
                {{education.name}}
                <el-button  style="float: right; padding: 3px 0;"  type="text" @click="deleteEducation(education.id)">删除</el-button>
                <el-button  style="float: right; padding: 3px 0;"  type="text" @click="getEducation(education.id)">修改</el-button>
            </div>
        </el-card>
        </div>
        <div>
            <el-dialog title="添加或修改" :visible.sync="dialogCountryFormVisible" width="500px">
            <el-form :model="country">
                <el-form-item label="国家" label-width="50px">
                <el-input v-model="country.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCountryFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateCountry()">确 定</el-button>
            </div>
            </el-dialog>
        </div>

        <div>
            <el-dialog title="添加或修改" :visible.sync="dialogEducationFormVisible" width="500px">
            <el-form :model="education">
                <el-form-item label="学历" label-width="50px">
                <el-input v-model="education.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEducationFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateEducation()">确 定</el-button>
            </div>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import countryApi from "@/api/country/country";
import educationApi from "@/api/education/education";
export default {
    data() {
        return {
            educationList: [],
            countryList: [],
            country: {},
            education :{},
            dialogCountryFormVisible: false,
            dialogEducationFormVisible: false
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData(){
            countryApi.getCountryList()
            .then((response) => {
            this.countryList = response.data
            })
            educationApi.getEducationList()
            .then((response) => {
            this.educationList = response.data
            })
        },
        saveOrUpdateCountry(){
            if(this.country.id === ''){
                countryApi.insertCountry(this.country)
                .then(response =>{
                    this.fetchData()
                    this.dialogCountryFormVisible = false
                    this.country = {}
                    this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                    });
                })
            }else{
                countryApi.updateCountry(this.country)
                .then(response =>{
                    this.fetchData()
                    this.dialogCountryFormVisible = false
                    this.country = {}
                    this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                    });
                })
            }  
        },
        saveOrUpdateEducation(){
            if(this.education.id === ''){
                educationApi.insertEducation(this.education)
                .then(response =>{
                    this.fetchData()
                    this.dialogEducationFormVisible = false
                    this.education = {}
                    this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                    });
                })
            }else{
                educationApi.updateEducation(this.education)
                .then(response =>{
                    this.fetchData()
                    this.dialogEducationFormVisible = false
                    this.education = {}
                    this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                    });
                })
            }  
        },
        getCountry(id){
            this.dialogCountryFormVisible = true
            countryApi.getCountryById(id)
            .then(response =>{
                this.country = response.data
            })
            
        },
        deleteCountry(id){
            countryApi.deleteCountryById(id)
            .then(response =>{
                this.fetchData()
            })
        },

        getEducation(id){
            this.dialogEducationFormVisible = true
            educationApi.getEducationById(id)
            .then(response =>{
                this.education = response.data
            })
            
        },
        deleteEducation(id){
            educationApi.deleteEducationById(id)
            .then(response =>{
                this.fetchData()
            })
        },
    },
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 300px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;

  }
</style>